let total = document.querySelector('.total')
let avgAge = document.querySelector('.avgAge')
let avgSalary = document.querySelector('.avgSalary')
let proportion = document.querySelector('.proportion')
let iconYoucecaidan = document.querySelector('.icon-youcecaidan')
let batch = document.querySelector('#batch')
let as = document.querySelectorAll('#batch a')
let icon = document.querySelector('.icon-youcecaidan')
let batchlis = batch.querySelectorAll('li')
axios({
    url: '/student/overview',
    method: 'get'
}).then(({ data }) => {
    total.innerText = data.total
    avgAge.innerText = data.avgAge
    avgSalary.innerText = data.avgSalary
    proportion.innerText = data.proportion
})

let drawPie = (data) => {
    // 调用echarts的init创建一个图表实例
    // echarts.init(dom元素):dom元素就是图表的容器
    let myChart = echarts.init(document.querySelector('.pie'))
    // 指定图表的配置项和数据
    let option = {
        title: {
            text: '籍贯 Hometown', //副标题
            left: 'left' // 位置
        },
        tooltip: {
            trigger: 'item',// 鼠标移入有提示
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        series: [
            {
                name: '学员分布', // 名称
                type: 'pie',// 类型，pie代表饼图
                radius: [30, 120],// 图表内外半径，可以用于设置图表大小
                center: ['50%', '50%'],
                roseType: 'area',
                itemStyle: {
                    borderRadius: 6
                },
                data
            }
        ]
    };
    myChart.setOption(option)
}

axios({
    url: '/student/list',
    method: 'get'
}).then(({ data }) => {
    let arr = [], obj = {}
    let namearr = [], expectarr = [], realityarr = []
    let chinaGeoCoordMap = {}, chinaDatas = []
    data.forEach(value => {
        obj = arr.filter(v => v.name == value.province)[0]
        if (obj) {
            obj.value += 1
        } else {
            arr.push({ value: 1, name: value.province })
        }
        namearr.push(value.name)
        expectarr.push(value.salary)
        realityarr.push(value.truesalary)
        chinaGeoCoordMap[value.province] = [value.jing, value.wei]
        chinaDatas.push([{ name: value.province, value: 0 }])
    })
    drawLine(namearr, expectarr, realityarr)
    drawPie(arr)
    mapChart(chinaGeoCoordMap, chinaDatas)
})

let drawLine = (namearr, expectarr, realityarr) => {
    let mychart = echarts.init(document.querySelector('.line'))
    let option = {
        dataZoom: [
            {
                type: 'slider',// 拖动条显示到轴的外面（默认就是slider类型）
                start: 0, // 拖动滑块起始位置（这是一个百分比）
                end: 30 // 拖动滑块结束位置（这是一个百分比）
            }
        ],
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['期望薪资', '实际薪资']
        },
        xAxis: {
            type: 'category',
            data: namearr
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '期望薪资',
                data: expectarr,
                type: 'line',
                color: 'blue',
                smooth: true
            }, {
                name: '实际薪资',
                data: realityarr,
                type: 'line',
                color: 'red',
                smooth: true
            }
        ]
    }
    mychart.setOption(option)
}

let drawBar = (data) => {
    let myChart = echarts.init(document.querySelector('.barChart'));
    let option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        grid: {
            bottom: '8%',
            left: '5%',
            right: '5%',
            top: '12%'
        },
        legend: {
            data: ['平均分', '低于60分人数', '60-80分的人数', '高于80分人数']
        },
        xAxis: {
            type: 'category',
            data: data.group,
            axisPointer: {
                type: 'shadow'
            }
        },
        yAxis: [
            {
                type: 'value',
                min: 0,
                max: 100,
                interval: 10,
                axisLabel: {
                    formatter: '{value} 分'
                }
            },
            {
                type: 'value',
                min: 0,
                max: 10,
                interval: 1,
                axisLabel: {
                    formatter: '{value} 人'
                }

            }],
        series: [
            {
                name: '平均分',
                data: data.avgScore,
                type: 'bar'
            }, {
                name: '低于60分人数',
                data: data.lt60,
                type: 'bar',
                yAxisIndex: 1, // 让这个数据系列和右侧的Y轴对应
            }, {
                name: '60-80分的人数',
                data: data.gt80,
                yAxisIndex: 1,
                type: 'bar'
            }, {
                name: '高于80分人数',
                data: data.gt60,
                yAxisIndex: 1,
                type: 'bar'
            }
        ]
    };
    myChart.setOption(option);
}

icon.addEventListener('click', function () {
    if (batch.style.display == '') {
        batch.style.display = 'block'
    } else if (batch.style.display == 'block') {
        batch.style.display = ''
    }
})
as.forEach((v, i) => {
    v.addEventListener('click', function () {
        getBarData(i + 1)
    })
})
let getBarData = (index) => {
    axios({
        url: '/score/batch',
        method: 'GET',
        params: { batch: index }
    }).then(({ data }) => drawBar(data))
}
getBarData(1)

// ----------------------- 地图 ------------------------------
let mapChart = (chinaGeoCoordMap, chinaDatas) => {
    console.log('chinaGeoCoordMap', chinaGeoCoordMap);
    console.log('chinaDatas', chinaDatas);
    let myChart = echarts.init($('.map')[0]);

    var convertData = function (data) {
        console.log(data);
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var dataItem = data[i];
            var fromCoord = chinaGeoCoordMap[dataItem[0].name];
            var toCoord = [113.438577, 23.137816]
            if (fromCoord && toCoord) {
                res.push([{
                    coord: fromCoord,
                    value: dataItem[0].value
                }, {
                    coord: toCoord,
                }]);
            }
        }
        return res;
    };
    var series = [];
    [['广东省', chinaDatas]].forEach(function (item, i) {
        series.push({
            type: 'lines',
            zlevel: 2,
            effect: {
                show: true,
                period: 4, //箭头指向速度，值越小速度越快
                trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
                symbol: 'arrow', //箭头图标
                symbolSize: 5, //图标大小
            },
            lineStyle: {
                normal: {
                    width: 1, //尾迹线条宽度
                    opacity: 1, //尾迹线条透明度
                    curveness: .3 //尾迹线条曲直度
                }
            },
            data: convertData(item[1])
        }, {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            zlevel: 2,
            rippleEffect: { //涟漪特效
                period: 4, //动画时间，值越小速度越快
                brushType: 'stroke', //波纹绘制方式 stroke, fill
                scale: 4 //波纹圆环最大限制，值越大波纹越大
            },
            label: {
                normal: {
                    show: true,
                    position: 'right', //显示位置
                    offset: [5, 0], //偏移设置
                    formatter: function (params) {//圆环显示文字
                        return params.data.name;
                    },
                    fontSize: 13
                },
                emphasis: {
                    show: true
                }
            },
            symbol: 'circle',
            symbolSize: function (val) {
                return 5 + val[2] * 5; //圆环大小
            },
            itemStyle: {
                normal: {
                    show: false,
                    color: '#f00'
                }
            },
            data: item[1].map(function (dataItem) {
                return {
                    name: dataItem[0].name,
                    value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
                };
            }),
        },
            //被攻击点
            {
                type: 'scatter',
                coordinateSystem: 'geo',
                zlevel: 2,
                rippleEffect: {
                    period: 4,
                    brushType: 'stroke',
                    scale: 4
                },
                label: {
                    normal: {
                        show: true,
                        position: 'right',
                        //offset:[5, 0],
                        color: '#0f0',
                        formatter: '{b}',
                        textStyle: {
                            color: "#0f0"
                        }
                    },
                    emphasis: {
                        show: true,
                        color: "#f60"
                    }
                },
                symbol: 'pin',
                symbolSize: 50,
                data: [{
                    name: item[0],
                    value: chinaGeoCoordMap[item[0]].concat([10]),
                }],
            }
        );
    });

    // 
    let option = {
        // 标题
        title: {
            // left: 'center',
            text: '来粤路线 From',
            textStyle: {
                color: '#6d767e'
            }
        },
        tooltip: {
            trigger: 'item',
            backgroundColor: 'rgba(166, 200, 76, 0.82)',
            borderColor: '#FFFFCC',
            showDelay: 0,
            hideDelay: 0,
            enterable: true,
            transitionDuration: 0,
            extraCssText: 'z-index:100',
            formatter: function (params, ticket, callback) {
                //根据业务自己拓展要显示的内容
                var res = "";
                var name = params.name;
                var value = params.value[params.seriesIndex + 1];
                res = "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value;
                return res;
            }
        },
        backgroundColor: "#fff",
        visualMap: { // 图例值控制（官方叫做视觉映射组件）
            min: 0,
            max: 1,
            calculable: true,
            show: false,
            color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
            textStyle: {
                color: '#fff'
            }
        },
        geo: {
            map: 'china',
            zoom: 1.2,
            label: {
                emphasis: {
                    show: false
                }
            },
            roam: true, //是否允许缩放
            itemStyle: {
                normal: {
                    color: 'rgba(51, 69, 89, .5)', //地图背景色
                    borderColor: '#516a89', //省市边界线00fcff 516a89
                    borderWidth: 1
                },
                emphasis: {
                    color: 'rgba(37, 43, 61, .5)' //悬浮背景
                }
            }
        },
        series: series
    };

    myChart.setOption(option);
}